<!DOCTYPE html>
<html lang="en" class="app">
    
    <head>
        <meta charset="utf-8" />
        <title>
            Notebook | Web Application
        </title>
        <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <link rel="stylesheet" href="css/app.v2.css" type="text/css" />
        <link rel="stylesheet" href="css/font.css" type="text/css" cache="false"
        />
        <!--[if lt IE 9]>
            <script src="js/ie/html5shiv.js" cache="false">
            </script>
            <script src="js/ie/respond.min.js" cache="false">
            </script>
            <script src="js/ie/excanvas.js" cache="false">
            </script>
        <![endif]-->
    </head>
    
    <body>
        <section class="vbox">
            <header class="bg-dark dk header navbar navbar-fixed-top-xs">
                <div class="navbar-header aside-md">
                    <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen"
                    data-target="#nav">
                        <i class="fa fa-bars">
                        </i>
                    </a>
                    <a href="#" class="navbar-brand" data-toggle="fullscreen">
                        <img src="images/logo.png" class="m-r-sm">
                        Notebook
                    </a>
                    <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
                        <i class="fa fa-cog">
                        </i>
                    </a>
                </div>
                <ul class="nav navbar-nav hidden-xs">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle dker" data-toggle="dropdown">
                            <i class="fa fa-building-o">
                            </i>
                            <span class="font-bold">
                                Activity
                            </span>
                        </a>
                        <section class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
                            <div class="wrapper lter m-t-n-xs">
                                <a href="#" class="thumb pull-left m-r">
                                    <img src="images/avatar.jpg" class="img-circle">
                                </a>
                                <div class="clear">
                                    <a href="#">
                                        <span class="text-white font-bold">
                                            @Mike Mcalidek
                                    </a>
                                    </span>
                                    <small class="block">
                                        Art Director
                                    </small>
                                    <a href="#" class="btn btn-xs btn-success m-t-xs">
                                        Upgrade
                                    </a>
                                </div>
                            </div>
                            <div class="row m-l-none m-r-none m-b-n-xs text-center">
                                <div class="col-xs-4">
                                    <div class="padder-v">
                                        <span class="m-b-xs h4 block text-white">
                                            245
                                        </span>
                                        <small class="text-muted">
                                            Followers
                                        </small>
                                    </div>
                                </div>
                                <div class="col-xs-4 dk">
                                    <div class="padder-v">
                                        <span class="m-b-xs h4 block text-white">
                                            55
                                        </span>
                                        <small class="text-muted">
                                            Likes
                                        </small>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="padder-v">
                                        <span class="m-b-xs h4 block text-white">
                                            2,035
                                        </span>
                                        <small class="text-muted">
                                            Photos
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </li>
                    <li>
                        <div class="m-t m-l">
                            <a href="price.html" class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade">
                                <i class="fa fa-long-arrow-up">
                                </i>
                            </a>
                        </div>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-xs nav-user">
                    <li class="hidden-xs">
                        <a href="#" class="dropdown-toggle dk" data-toggle="dropdown">
                            <i class="fa fa-bell">
                            </i>
                            <span class="badge badge-sm up bg-danger m-l-n-sm count">
                                2
                            </span>
                        </a>
                        <section class="dropdown-menu aside-xl">
                            <section class="panel bg-white">
                                <header class="panel-heading b-light bg-light">
                                    <strong>
                                        You have
                                        <span class="count">
                                            2
                                        </span>
                                        notifications
                                    </strong>
                                </header>
                                <div class="list-group list-group-alt animated fadeInRight">
                                    <a href="#" class="media list-group-item">
                                        <span class="pull-left thumb-sm">
                                            <img src="images/avatar.jpg" alt="John said" class="img-circle">
                                        </span>
                                        <span class="media-body block m-b-none">
                                            Use awesome animate.css
                                            <br>
                                            <small class="text-muted">
                                                10 minutes ago
                                            </small>
                                        </span>
                                    </a>
                                    <a href="#" class="media list-group-item">
                                        <span class="media-body block m-b-none">
                                            1.0 initial released
                                            <br>
                                            <small class="text-muted">
                                                1 hour ago
                                            </small>
                                        </span>
                                    </a>
                                </div>
                                <footer class="panel-footer text-sm">
                                    <a href="#" class="pull-right">
                                        <i class="fa fa-cog">
                                        </i>
                                    </a>
                                    <a href="#notes" data-toggle="class:show animated fadeInRight">
                                        See all the notifications
                                    </a>
                                </footer>
                            </section>
                        </section>
                    </li>
                    <li class="dropdown hidden-xs">
                        <a href="#" class="dropdown-toggle dker" data-toggle="dropdown">
                            <i class="fa fa-fw fa-search">
                            </i>
                        </a>
                        <section class="dropdown-menu aside-xl animated fadeInUp">
                            <section class="panel bg-white">
                                <form role="search">
                                    <div class="form-group wrapper m-b-none">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Search">
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-info btn-icon">
                                                    <i class="fa fa-search">
                                                    </i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </form>
                            </section>
                        </section>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="thumb-sm avatar pull-left">
                                <img src="images/avatar.jpg">
                            </span>
                            John.Smith
                            <b class="caret">
                            </b>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight">
                            <span class="arrow top">
                            </span>
                            <li>
                                <a href="#">
                                    Settings
                                </a>
                            </li>
                            <li>
                                <a href="profile.html">
                                    Profile
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="badge bg-danger pull-right">
                                        3
                                    </span>
                                    Notifications
                                </a>
                            </li>
                            <li>
                                <a href="docs.html">
                                    Help
                                </a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="modal.lockme.html" data-toggle="ajaxModal">
                                    Logout
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </header>
            <section>
                <section class="hbox stretch">
                    <!-- .aside -->
                    <aside class="bg-light lter b-r aside-md hidden-print" id="nav">
                        <section class="vbox">
                            <header class="header bg-primary lter text-center clearfix">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-dark btn-icon" title="New project">
                                        <i class="fa fa-plus">
                                        </i>
                                    </button>
                                    <div class="btn-group hidden-nav-xs">
                                        <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                                            Switch Project
                                            <span class="caret">
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu text-left">
                                            <li>
                                                <a href="#">
                                                    Project
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    Another Project
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    More Projects
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </header>
                            <section class="w-f scrollable">
                                <div class="slim-scroll" data-height="auto" data-disable-fade-out="true"
                                data-distance="0" data-size="5px" data-color="#333333">
                                    <!-- nav -->
                                    <nav class="nav-primary hidden-xs">
                                        <ul class="nav">
                                            <li>
                                                <a href="index.html">
                                                    <i class="fa fa-dashboard icon">
                                                        <b class="bg-danger">
                                                        </b>
                                                    </i>
                                                    <span>
                                                        Workset
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#layout">
                                                    <i class="fa fa-columns icon">
                                                        <b class="bg-warning">
                                                        </b>
                                                    </i>
                                                    <span class="pull-right">
                                                        <i class="fa fa-angle-down text">
                                                        </i>
                                                        <i class="fa fa-angle-up text-active">
                                                        </i>
                                                    </span>
                                                    <span>
                                                        Layouts
                                                    </span>
                                                </a>
                                                <ul class="nav lt">
                                                    <li>
                                                        <a href="layout-c.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Color option
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="layout-r.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Right nav
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="layout-h.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                H-Layout
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="active">
                                                <a href="#uikit" class="active">
                                                    <i class="fa fa-flask icon">
                                                        <b class="bg-success">
                                                        </b>
                                                    </i>
                                                    <span class="pull-right">
                                                        <i class="fa fa-angle-down text">
                                                        </i>
                                                        <i class="fa fa-angle-up text-active">
                                                        </i>
                                                    </span>
                                                    <span>
                                                        UI kit
                                                    </span>
                                                </a>
                                                <ul class="nav lt">
                                                    <li>
                                                        <a href="buttons.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Buttons
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="icons.html">
                                                            <b class="badge bg-info pull-right">
                                                                369
                                                            </b>
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Icons
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="grid.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Grid
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="widgets.html">
                                                            <b class="badge pull-right">
                                                                8
                                                            </b>
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Widgets
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="components.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Components
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="list.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                List group
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#table">
                                                            <i class="fa fa-angle-down text">
                                                            </i>
                                                            <i class="fa fa-angle-up text-active">
                                                            </i>
                                                            <span>
                                                                Table
                                                            </span>
                                                        </a>
                                                        <ul class="nav bg">
                                                            <li>
                                                                <a href="table-static.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Table static
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="table-datatable.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Datatable
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="table-datagrid.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Datagrid
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#form">
                                                            <i class="fa fa-angle-down text">
                                                            </i>
                                                            <i class="fa fa-angle-up text-active">
                                                            </i>
                                                            <span>
                                                                Form
                                                            </span>
                                                        </a>
                                                        <ul class="nav bg">
                                                            <li>
                                                                <a href="form-elements.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Form elements
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="form-validation.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Form validation
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="form-wizard.html">
                                                                    <i class="fa fa-angle-right">
                                                                    </i>
                                                                    <span>
                                                                        Form wizard
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="active">
                                                        <a href="chart.html" class="active">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Chart
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="fullcalendar.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Fullcalendar
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="portlet.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Portlet
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="timeline.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Timeline
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#pages">
                                                    <i class="fa fa-file-text icon">
                                                        <b class="bg-primary">
                                                        </b>
                                                    </i>
                                                    <span class="pull-right">
                                                        <i class="fa fa-angle-down text">
                                                        </i>
                                                        <i class="fa fa-angle-up text-active">
                                                        </i>
                                                    </span>
                                                    <span>
                                                        Pages
                                                    </span>
                                                </a>
                                                <ul class="nav lt">
                                                    <li>
                                                        <a href="gallery.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Gallery
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="profile.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Profile
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="invoice.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Invoice
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="intro.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Intro
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="master.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Master
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="gmap.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Google Map
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="signin.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Signin
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="signup.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                Signup
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="404.html">
                                                            <i class="fa fa-angle-right">
                                                            </i>
                                                            <span>
                                                                404
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="mail.html">
                                                    <b class="badge bg-danger pull-right">
                                                        3
                                                    </b>
                                                    <i class="fa fa-envelope-o icon">
                                                        <b class="bg-primary dker">
                                                        </b>
                                                    </i>
                                                    <span>
                                                        Message
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="notebook.html">
                                                    <i class="fa fa-pencil icon">
                                                        <b class="bg-info">
                                                        </b>
                                                    </i>
                                                    <span>
                                                        Notes
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                    <!-- / nav -->
                                </div>
                            </section>
                            <footer class="footer lt hidden-xs b-t b-light">
                                <div id="chat" class="dropup">
                                    <section class="dropdown-menu on aside-md m-l-n">
                                        <section class="panel bg-white">
                                            <header class="panel-heading b-b b-light">
                                                Active chats
                                            </header>
                                            <div class="panel-body animated fadeInRight">
                                                <p class="text-sm">
                                                    No active chats.
                                                </p>
                                                <p>
                                                    <a href="#" class="btn btn-sm btn-default">
                                                        Start a chat
                                                    </a>
                                                </p>
                                            </div>
                                        </section>
                                    </section>
                                </div>
                                <div id="invite" class="dropup">
                                    <section class="dropdown-menu on aside-md m-l-n">
                                        <section class="panel bg-white">
                                            <header class="panel-heading b-b b-light">
                                                John
                                                <i class="fa fa-circle text-success">
                                                </i>
                                            </header>
                                            <div class="panel-body animated fadeInRight">
                                                <p class="text-sm">
                                                    No contacts in your lists.
                                                </p>
                                                <p>
                                                    <a href="#" class="btn btn-sm btn-facebook">
                                                        <i class="fa fa-fw fa-facebook">
                                                        </i>
                                                        Invite from Facebook
                                                    </a>
                                                </p>
                                            </div>
                                        </section>
                                    </section>
                                </div>
                                <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-default btn-icon">
                                    <i class="fa fa-angle-left text">
                                    </i>
                                    <i class="fa fa-angle-right text-active">
                                    </i>
                                </a>
                                <div class="btn-group hidden-nav-xs">
                                    <button type="button" title="Chats" class="btn btn-icon btn-sm btn-default"
                                    data-toggle="dropdown" data-target="#chat">
                                        <i class="fa fa-comment-o">
                                        </i>
                                    </button>
                                    <button type="button" title="Contacts" class="btn btn-icon btn-sm btn-default"
                                    data-toggle="dropdown" data-target="#invite">
                                        <i class="fa fa-facebook">
                                        </i>
                                    </button>
                                </div>
                            </footer>
                        </section>
                    </aside>
                    <!-- /.aside -->
                    <section id="content">
                        <section class="vbox">
                            <section class="scrollable padder">
                                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                                    <li>
                                        <a href="index.html">
                                            <i class="fa fa-home">
                                            </i>
                                            Home
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            UI kit
                                        </a>
                                    </li>
                                    <li class="active">
                                        Chart
                                    </li>
                                </ul>
                                <div class="m-b-md">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <h3 class="m-b-none m-t-sm">
                                                Charts
                                            </h3>
                                            <small>
                                                Statistics & graph information
                                            </small>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="text-right text-left-xs">
                                                <div class="sparkline m-l m-r-lg pull-right" data-type="bar" data-height="35"
                                                data-bar-width="6" data-bar-spacing="2" data-bar-color="#fb6b5b">
                                                    5,8,9,12,8,10,8,9,7,8,6
                                                </div>
                                                <div class="m-t-sm">
                                                    <span class="text-uc">
                                                        New users
                                                    </span>
                                                    <div class="h4">
                                                        <strong>
                                                            1,120,100
                                                        </strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <section class="panel panel-default">
                                    <header class="panel-heading font-bold">
                                        Site statistics
                                    </header>
                                    <div class="panel-body">
                                        <div id="flot-1ine" style="height:250px">
                                        </div>
                                    </div>
                                    <footer class="panel-footer bg-white">
                                        <div class="row text-center no-gutter">
                                            <div class="col-xs-3 b-r b-light">
                                                <p class="h3 font-bold m-t">
                                                    5,860
                                                </p>
                                                <p class="text-muted">
                                                    Orders
                                                </p>
                                            </div>
                                            <div class="col-xs-3 b-r b-light">
                                                <p class="h3 font-bold m-t">
                                                    10,450
                                                </p>
                                                <p class="text-muted">
                                                    Sellings
                                                </p>
                                            </div>
                                            <div class="col-xs-3 b-r b-light">
                                                <p class="h3 font-bold m-t">
                                                    21,230
                                                </p>
                                                <p class="text-muted">
                                                    Items
                                                </p>
                                            </div>
                                            <div class="col-xs-3">
                                                <p class="h3 font-bold m-t">
                                                    7,230
                                                </p>
                                                <p class="text-muted">
                                                    Customers
                                                </p>
                                            </div>
                                        </div>
                                    </footer>
                                </section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Multiple
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-chart" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Real-time update
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-live" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Vertical bar
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-bar" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Horizontal bar
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-bar-h" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Pie Chart
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-pie" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-md-6">
                                        <section class="panel panel-default">
                                            <header class="panel-heading font-bold">
                                                Donut pie
                                            </header>
                                            <div class="panel-body">
                                                <div id="flot-pie-donut" style="height:240px">
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                Pie
                                            </header>
                                            <div class="panel-body text-center">
                                                <div class="sparkline inline" data-type="pie" data-height="150" data-slice-colors="['#99c7ce','#f2f2f2']">
                                                    60,40
                                                </div>
                                                <div class="line pull-in">
                                                </div>
                                                <div class="text-xs">
                                                    <i class="fa fa-circle text-info">
                                                    </i>
                                                    60%
                                                    <i class="fa fa-circle text-muted">
                                                    </i>
                                                    40%
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                Composite
                                            </header>
                                            <div class="text-center bg-success lt clearfix">
                                                <div class="m-t-lg clearfix">
                                                    <div class="sparkline padder m-b" data-type="line" data-resize="true"
                                                    data-height="50" data-width="100%" data-line-width="2" data-line-color="#fff"
                                                    data-spot-color="#fff" data-fill-color="" data-highlight-line-color="#fff"
                                                    data-spot-radius="3" values="220,210,200,325,250,320,345,250,250,250,400,380">
                                                    </div>
                                                    <div class="bg padder">
                                                        <div class="sparkline inline m-t" data-type="bar" data-height="67" data-bar-width="6"
                                                        data-bar-spacing="10" data-bar-color="#a9d089">
                                                            5,8,12,10,11,12,8,9,6,7,8,6,10,7
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <footer class="panel-footer text-sm">
                                                Check more data
                                            </footer>
                                        </section>
                                    </div>
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                Stacked
                                            </header>
                                            <div class="panel-body text-center">
                                                <div class="sparkline inline" data-type="bar" data-height="160" data-bar-width="12"
                                                data-bar-spacing="10" data-stacked-bar-color="['#afcf6f', '#eee']">
                                                    5:5,8:4,12:5,10:6,11:7,12:2,8:6,9:3,5:5,4:9
                                                </div>
                                                <ul class="list-inline text-muted axis">
                                                    <li>
                                                        1
                                                    </li>
                                                    <li>
                                                        2
                                                    </li>
                                                    <li>
                                                        3
                                                    </li>
                                                    <li>
                                                        4
                                                    </li>
                                                    <li>
                                                        5
                                                    </li>
                                                    <li>
                                                        6
                                                    </li>
                                                    <li>
                                                        7
                                                    </li>
                                                    <li>
                                                        8
                                                    </li>
                                                    <li>
                                                        9
                                                    </li>
                                                    <li>
                                                        10
                                                    </li>
                                                </ul>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                Conversion
                                            </header>
                                            <div class="panel-body text-center">
                                                <h4>
                                                    62.5
                                                    <small>
                                                        hrs
                                                    </small>
                                                </h4>
                                                <small class="text-muted block">
                                                    Updated at 2 minutes ago
                                                </small>
                                                <div class="inline">
                                                    <div class="easypiechart" data-percent="75" data-line-width="16" data-loop="false"
                                                    data-size="188">
                                                        <span class="h2 step">
                                                            75
                                                        </span>
                                                        %
                                                        <div class="easypie-text">
                                                            New
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-footer">
                                                <small>
                                                    % of avarage rate of the Conversion
                                                </small>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                Bounce rate
                                            </header>
                                            <div class="panel-body text-center">
                                                <h4>
                                                    <small>
                                                        last
                                                    </small>
                                                    12
                                                    <small>
                                                        hrs
                                                    </small>
                                                </h4>
                                                <small class="text-muted block">
                                                    yesterday: 20%
                                                </small>
                                                <div class="inline">
                                                    <div class="easypiechart" data-percent="25" data-line-width="6" data-loop="false"
                                                    data-size="188">
                                                        <span class="h2 step">
                                                            25
                                                        </span>
                                                        %
                                                        <div class="easypie-text">
                                                            Today
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-footer">
                                                <small>
                                                    % of change
                                                </small>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-lg-4">
                                        <section class="panel panel-default">
                                            <header class="panel-heading">
                                                New visitors
                                            </header>
                                            <div class="panel-body text-center">
                                                <h4>
                                                    3,450
                                                </h4>
                                                <small class="text-muted block">
                                                    Worldwide visitors
                                                </small>
                                                <div class="inline">
                                                    <div class="easypiechart" data-percent="60" data-line-width="30" data-track-color="#eee"
                                                    data-bar-color="#afcf6f" data-scale-color="#fff" data-size="188" data-line-cap='butt'>
                                                        <span class="h2 step">
                                                            60
                                                        </span>
                                                        %
                                                        <div class="easypie-text">
                                                            new visits
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel-footer">
                                                <small>
                                                    % of avarage rate of the visits
                                                </small>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </section>
                        </section>
                        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen"
                        data-target="#nav">
                        </a>
                    </section>
                    <aside class="bg-light lter b-l aside-md hide" id="notes">
                        <div class="wrapper">
                            Notification
                        </div>
                    </aside>
                </section>
            </section>
        </section>
        <script src="js/app.v2.js">
        </script>
        <!-- Bootstrap -->
        <!-- App -->
        <!-- Sparkline Chart -->
        <script src="js/charts/sparkline/jquery.sparkline.min.js" cache="false">
        </script>
        <!-- Easy Pie Chart -->
        <script src="js/charts/easypiechart/jquery.easy-pie-chart.js" cache="false">
        </script>
        <!-- Flot -->
        <script src="js/charts/flot/jquery.flot.min.js" cache="false">
        </script>
        <script src="js/charts/flot/jquery.flot.tooltip.min.js" cache="false">
        </script>
        <script src="js/charts/flot/jquery.flot.resize.js" cache="false">
        </script>
        <script src="js/charts/flot/jquery.flot.orderBars.js" cache="false">
        </script>
        <script src="js/charts/flot/jquery.flot.pie.min.js" cache="false">
        </script>
        <script src="js/charts/flot/jquery.flot.grow.js" cache="false">
        </script>
        <script src="js/charts/flot/demo.js" cache="false">
        </script>
    </body>

</html>